<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<style type="text/css" media="screen">
#content {
	width: 960px;
	margin: 5px auto;
}

#left {
	background: #FFF;
	height: auto;
	width: 690px;
	float: left;
}

#right {
	background: #FFF;
	height: auto;
	width: 260px;
	float: right;
}

.select {
	width: 150px;
}
</style>
<script type="text/javascript" src="../../js/jquery.min.js"></script>

<script type="text/javascript" src="../../js/highcharts.js"></script>

<script type="text/javascript" src="../../js/modules/exporting.js"></script>

<script type="text/javascript">
	var chart;
	$(document).ready(
			function() {
				chart = new Highcharts.Chart({
					chart : {
						renderTo : 'container',
						defaultSeriesType : 'scatter',
						zoomType : 'xy'
					},
					title : {
						text : '奶粉-米粉货架背个数'
					},
					subtitle : {
						text : 'demo'
					},
					xAxis : {
						title : {
							enabled : true,
							text : '米粉'
						},
						startOnTick : true,
						endOnTick : true,
						showLastLabel : true
					},
					yAxis : {
						title : {
							text : '奶粉'
						}
					},
					tooltip : {
						formatter : function() {
							return '米粉' + this.x + ' , 奶粉' + this.y + '';
						}
					},
					legend : {
						layout : 'vertical',
						align : 'left',
						verticalAlign : 'top',
						x : 100,
						y : 70,
						floating : true,
						backgroundColor : '#FFFFFF',
						borderWidth : 1
					},
					plotOptions : {
						scatter : {
							marker : {
								radius : 5,
								states : {
									hover : {
										enabled : true,
										lineColor : 'rgb(100,100,100)'
									}
								}
							},
							states : {
								hover : {
									marker : {
										enabled : false
									}
								}
							}
						}
					},
					series : [ {
						name : '零售点',
						color : 'rgba(119, 152, 191, .5)',
						data : [ [ 174.0, 65.6 ], [ 175.3, 71.8 ],
								[ 193.5, 80.7 ], [ 186.5, 72.6 ],
								[ 187.2, 78.8 ], [ 181.5, 74.8 ],
								[ 184.0, 86.4 ], [ 184.5, 78.4 ],
								[ 175.0, 62.0 ], [ 184.0, 81.6 ],
								[ 180.0, 76.6 ], [ 177.8, 83.6 ],
								[ 192.0, 90.0 ], [ 176.0, 74.6 ],
								[ 174.0, 71.0 ], [ 184.0, 79.6 ],
								[ 192.7, 93.8 ], [ 171.5, 70.0 ],
								[ 173.0, 72.4 ], [ 176.0, 85.9 ],
								[ 176.0, 78.8 ], [ 180.5, 77.8 ],
								[ 172.7, 66.2 ], [ 176.0, 86.4 ],
								[ 173.5, 81.8 ], [ 178.0, 89.6 ],
								[ 180.3, 82.8 ], [ 180.3, 76.4 ],
								[ 164.5, 63.2 ], [ 173.0, 60.9 ],
								[ 183.5, 74.8 ], [ 175.5, 70.0 ],
								[ 188.0, 72.4 ], [ 189.2, 84.1 ],
								[ 172.8, 69.1 ], [ 170.0, 59.5 ],
								[ 182.0, 67.2 ], [ 170.0, 61.3 ],
								[ 177.8, 68.6 ], [ 184.2, 80.1 ],
								[ 186.7, 87.8 ], [ 171.4, 84.7 ],
								[ 172.7, 73.4 ], [ 175.3, 72.1 ],
								[ 180.3, 82.6 ], [ 182.9, 88.7 ],
								[ 188.0, 84.1 ], [ 177.2, 94.1 ],
								[ 172.1, 74.9 ], [ 167.0, 59.1 ],
								[ 169.5, 75.6 ], [ 174.0, 86.2 ],
								[ 172.7, 75.3 ], [ 182.2, 87.1 ],
								[ 164.1, 55.2 ], [ 163.0, 57.0 ],
								[ 171.5, 61.4 ], [ 184.2, 76.8 ],
								[ 174.0, 86.8 ], [ 174.0, 72.2 ],
								[ 177.0, 71.6 ], [ 186.0, 84.8 ],
								[ 167.0, 68.2 ], [ 171.8, 66.1 ],
								[ 182.0, 72.0 ], [ 167.0, 64.6 ],
								[ 177.8, 74.8 ], [ 164.5, 70.0 ],
								[ 192.0, 101.6 ], [ 175.5, 63.2 ],
								[ 171.2, 79.1 ], [ 181.6, 78.9 ],
								[ 167.4, 67.7 ], [ 181.1, 66.0 ],
								[ 177.0, 68.2 ], [ 174.5, 63.9 ],
								[ 177.5, 72.0 ], [ 170.5, 56.8 ],
								[ 182.4, 74.5 ], [ 197.1, 90.9 ] ]

					} ]
				});

			});

	var chart1;
	$(document).ready(function() {
		chart1 = new Highcharts.Chart({
			chart : {
				renderTo : 'container1',
				plotBackgroundColor : null,
				plotBorderWidth : null,
				plotShadow : false
			},
			title : {
				text : '米粉陈列'
			},
			tooltip : {
				formatter : function() {
					return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
				}
			},
			plotOptions : {
				pie : {
					allowPointSelect : true,
					cursor : 'pointer',
					dataLabels : {
						enabled : false
					},
					showInLegend : true
				}
			},
			series : [ {
				type : 'pie',
				name : 'Browser share',
				data : [ [ '未按阶段排列', 60.0 ], [ '按阶段排列', 40.0 ] ]
			} ]
		});
	});

	var chart2;
	$(document).ready(function() {
		chart2 = new Highcharts.Chart({
			chart : {
				renderTo : 'container2',
				plotBackgroundColor : null,
				plotBorderWidth : null,
				plotShadow : false
			},
			title : {
				text : '奶粉陈列'
			},
			tooltip : {
				formatter : function() {
					return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
				}
			},
			plotOptions : {
				pie : {
					allowPointSelect : true,
					cursor : 'pointer',
					dataLabels : {
						enabled : false
					},
					showInLegend : true
				}
			},
			series : [ {
				type : 'pie',
				name : 'Browser share',
				data : [ [ '未按阶段排列', 33.0 ], [ '按阶段排列', 67.0 ] ]
			} ]
		});
	});
</script>
</head>

<body>

	<div align="center">

		<div
			style="width: 960px; height: 100px; background-image: url(../../images/title.png)">
		</div>

		<div align="left" style="width: 960px">
			<p>
				<a href="../../home.html">首页</a>&nbsp;&gt;&gt;&nbsp;主货架
			</p>
		</div>

		<div id="content">
			<div id="left" align="center">
				<div id="container"
					style="width: 680px; height: 400px; margin: 0 auto"></div>

			</div>
			<div id="right" align="center">
				<table width="260" border="0" cellspacing="5">
					<tr>
						<td width="80" align="right">Month&nbsp;&nbsp;</td>
						<td width="176"><select name="Month" class="select">
								<option value="January">January</option>
								<option value="February">February</option>
								<option value="March">March</option>
								<option value="April">April</option>
						</select>
						</td>
					</tr>
					<tr>
						<td align="right">System&nbsp;&nbsp;</td>
						<td><select name="System" class="select">
								<option value="沃尔玛">沃尔玛</option>
								<option value="家乐福">家乐福</option>
								<option value="好又多">好又多</option>
						</select></td>
					</tr>
					<tr>
						<td align="right">Region&nbsp;&nbsp;</td>
						<td><select name="Region" class="select">
								<option value="All">All</option>
								<option value="East">East</option>
								<option value="West">West</option>
								<option value="South">South</option>
								<option value="North">North</option>
						</select></td>
					</tr>
					<tr>
						<td align="right">Area&nbsp;&nbsp;</td>
						<td><select name="Area" class="select">
								<option value="All">All</option>
								<option value="Shanghai">Shanghai</option>
								<option value="Beijing">Beijing</option>
								<option value="Anhui">Anhui</option>
						</select></td>
					</tr>
					<tr>
						<td align="right">City&nbsp;&nbsp;</td>
						<td><select name="City" class="select">
								<option value="All">All</option>
								<option value="Shanghai">Shanghai</option>
								<option value="Beijing">Beijing</option>
								<option value="Wuhu">Wuhu</option>
						</select></td>
					</tr>
					<tr>
						<td colspan="2" align="center"><map name="mymap">
								<area shape="rect" coords="95,3,153,22" href="shelf_ytd.html" />
								<area shape="rect" coords="2,1,65,21" href="shelf.html" />
							</map> <img src="../../images/BT_mtd_ytd.PNG" width="156" height="24"
							border="0" usemap="#mymap" /></td>
					</tr>
				</table>


			</div>

		</div>
		<table width=100% border="0px">
			<tr>
				<td align="center">
					<table border="0">
						<tr>
							<td>
								<div id="container1"
									style="width: 476px; height: 400px; margin: 0 auto"></div>
							</td>
							<td>
								<div id="container2"
									style="width: 476px; height: 400px; margin: 0 auto"></div>
							</td>
						</tr>
					</table></td>
			</tr>
		</table>
	</div>

</body>
</html>
